<template>
	<!-- 搜索 -->
	<el-row>
		<el-col :span="24">
			<el-form :inline="true" :model="state.query">
				<el-form-item label="论文标题">
					<el-input
						v-model="state.query.name"
						placeholder="请输入论文标题"
						clearable
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="page">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
	</el-row>

	<!-- 表格 -->
	<el-row>
		<el-col :span="24">
			<el-table :data="state.tableData" border style="width: 100%">
				<el-table-column prop="id" label="编号" align="center" />
				<el-table-column prop="name" label="论文标题" align="center" />
				<el-table-column prop="path" label="论文路径" align="center" />
				<el-table-column prop="is_view" label="是否分析" align="center" />
				<el-table-column prop="view" label="阅读人数" align="center" />
				<el-table-column fixed="right" label="操作" align="center">
					<template #default="scope">
						<el-button
							type="primary"
							size="small"
							@click.prevent="edit(scope.row)"
						>
							编辑
						</el-button>
						<el-button
							type="danger"
							size="small"
							@click.prevent="del(scope.row)"
						>
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-col>
	</el-row>

	<!-- 分页 -->
	<el-row>
		<el-col :span="24" class="pagination-container">
			<el-pagination
				class="page"
				layout="prev, pager, next"
				:total="state.page.total"
				:current-page="state.query.page"
				:page-size="state.query.limit"
				@current-change="handlePageChange"
			/>
		</el-col>
	</el-row>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus'; // Element Plus 消息提示

const state = reactive({
	query: {
		page: 1,
		limit: 10,
		name: '', // 论文标题搜索
	},
	tableData: [],
	page: {
		total: 0, // 总记录数
	},
});

// 查询论文
function page() {
	const params = {
		page: state.query.page,
		per_page: state.query.limit,
		name: state.query.name,
	};
	http.get('/api/items/page', { params }).then(response => {
		state.tableData = response.data.list;
		state.page.total = response.data.page.total;
	}).catch(error => {
		ElMessage.error('获取论文列表失败');
	});
}

// 删除
const del = (data) => {
	http.delete(`/api/item/${data.id}`).then(() => {
		ElMessage.success('删除成功');
		page();
	}).catch(error => {
		ElMessage.error('删除失败');
	});
};

// 编辑
const edit = (data) => {
	// 实现编辑逻辑（例如，打开编辑对话框）
};

// 分页改变
const handlePageChange = (newPage) => {
	state.query.page = newPage;
	page();
};

// 组件挂载时加载数据
onMounted(() => {
	page();
});
</script>

<style scoped>
.pagination-container {
	padding-top: 15px;
	display: flex;
	justify-content: center; /* 水平居中 */
}
</style>
